<template>
  <div class="content">
    <customer-edit ref="CustomerEdit" :form="form" type="edit">
      <template #title>
        <Title title="客户信息" />
      </template>
      <template #save>
        <div class="save-btn" @click="saveFun"><el-button type="primary">保存</el-button></div>
      </template>
    </customer-edit>
    <div class="line"></div>
    <customer-dynamic ref="CustomerRecord" :customerId="form._id" @onCallDetailShow="callDetailShow"></customer-dynamic>
    <move-dialog
      :visible="show"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      width="1000px"
      title="通话详情"
    >
      <call-info :scene="'callrecord'" :callId="callId" :allowOutbound="false"></call-info>
    </move-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, nextTick, reactive, toRefs } from 'vue'
import customerEdit from '@app/customer/components/customer-form.vue'
import customerDynamic from '@app/customer/components/customer-dynamic/index.vue'
import Title from '@app/customer/components/title.vue'
import { updateCus } from '@app/customer/apis/pool'
import { ElMessage } from 'element-plus'
import callInfo from '@app/call-center/views/recent-calls/component/cardInfo.vue' // 通话记录详情
import moveDialog from '@/common/components/move-dialog/index.vue'
export default defineComponent({
  name: 'DetailCom',
  components: { customerEdit, customerDynamic, Title, callInfo, moveDialog },
  emits: ['onUpdateData'],
  setup(_, { emit }) {
    const instance: any = getCurrentInstance()

    const state = reactive({
      form: {} as any,
      show: false,
      callId: ''
    })

    const closeDialog = () => {
      state.show = false
      state.callId = '' // 清空通话id
    }

    const initData = (form = {}) => {
      state.form = form
    }

    const saveFun = () => {
      instance?.refs.CustomerEdit.isCheckForm().then((res: any) => {
        if (res.status) {
          updateCus(res.form).then((res) => {
            if (res.success) {
              ElMessage.success('操作成功')
              emit('onUpdateData')
            }
          })
        }
      })
    }

    const updateDyList = async () => {
      await nextTick()
      instance?.refs.CustomerRecord.searchFun()
    }

    const callDetailShow = (callId: string) => {
      state.show = true
      state.callId = callId
    }

    return {
      initData,
      saveFun,
      updateDyList,
      closeDialog,
      callDetailShow,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.datetime-range
  width 100%
.content
  display flex
  height calc(100vh - 241px)
  position relative
  .customer-form
    width 0
    flex 1
    height 100%
    overflow auto
    padding-right 24px
    :deep(.el-date-editor)
      width calc(100% - 22px)
  .line
    width 1px
    margin-right 24px
    background #E7E9ED
  .customer-dynamic
    width 680px
.save-btn
  width 100%
  padding-top 14px
  box-sizing border-box
  box-shadow 0px -1px 0px rgba(0, 0, 0, 0.05)
  position sticky
  bottom 0
  background #fff
  z-index 1
</style>
